<template>
    <div class="container">
        <div class="tip">
            <van-nav-bar @click-left="left">
                <template #left>
                    <van-icon name="cross" color="black" size="25px" />
                </template>
                <template #title>
                    <p>当前位置 - {{ $store.state.city.name }}</p>
                </template>
            </van-nav-bar>
        </div>
        <div class="search">
            <van-search v-model="value" placeholder="请输入搜索关键词" />
        </div>
        <div class="dw">
            <div class="dw1">
                <p class="GPS">GPS定位你所在的城市</p>
                <div class="sb">定位失败</div>
            </div>
            <div class="hotbox">
                <div class="city-title">热门城市</div>
                <ul class="city-index">
                    <li @click="select(item)" v-for="(item, index) in hot" :key="index">
                        <div>{{ item.name }}</div>
                    </li>
                </ul>
            </div>
        </div>
        <van-index-bar :index-list="Object.keys(cities)">
        <div v-for="(value, key, index) in cities" :key="index">
            <van-index-anchor class="theheader" :index="key">{{ key }}</van-index-anchor>
            <van-cell @click="select(item)" :title="item.name" v-for="(item, idx) in value" :key="idx" />
        </div>
        </van-index-bar>
    </div>
</template>

<script>
import { city } from '@/request/request'
import Vue from 'vue';
import { NavBar } from 'vant';
import { Icon } from 'vant';
import { Search } from 'vant';
import { Grid, GridItem } from 'vant';
import { Cell, CellGroup } from 'vant';
import { IndexBar, IndexAnchor } from 'vant';

Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Search);
Vue.use(Icon);
Vue.use(NavBar);
export default {
    created() {
        city().then(res => {
            this.cities = res
            let arr = []
            for (var i = 0; i < this.cities.length; i++) {
                if (this.cities[i].isHot === 1) {
                    arr.push(this.cities[i])
                }
            }
            this.hot = arr
        })
    },
    async mounted() {
        let citys = await city()
        this.cities = await this.dict(citys)
    },
    data() {
        return {
            cities: [],
            value: '',
            hot: []
        }
    },
    methods: {
        left() {
            this.$router.back()
        },
        select(city) {
            this.$store.commit('changeCity', city)
            this.$router.back()
        },
        dict(data) {
            let field = 'pinyin'
            let letter_reg = /^[A-Z]$/
            let list = []
            for (let i = 0; i < data.length; i++) {
                list['#'] = []
                let letter = data[i][field].substr(0, 1).toUpperCase()
                if (!letter_reg.test(letter)) {
                    letter = "#";
                }
                if (!(letter in list)) {
                    list[letter] = new Array();
                }
                list[letter].push(data[i]);
            }

            var resault = new Array();
            for (var key in list) {
                resault.push({
                    letter: key,
                    list: list[key],
                });
            }
            resault.sort(function (x, y) {
                return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
            });
            var last_arr = resault[0];
            resault.splice(0, 1);
            resault.push(last_arr);
            var json_sort = {};
            for (var i = 0; i < resault.length; i++) {
                json_sort[resault[i].letter] = resault[i].list;
            }
            return json_sort;
        }
    }
}

</script>

<style lang="scss" scoped>
.tip{
    position: sticky;
    top: 0;
}
.container {
    background-color: #f4f4f4;
    background-color: #fff;

}

.cs li {
    line-height: 50px;
    background-color: white;
    border-bottom: 1px solid gray;
    padding-left: 10px;
}

.cs ul {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

.dw1 {
    width: 100%;
    height: 80px;
    background-color: white;
}

.dw1 .GPS {
    font-size: 12px;
    color: #797D82;
    padding: 10px 0 0 10px;
}

.sb {
    width: 100px;
    height: 30px;
    font-size: 14px;
    background-color: #f4f4f4;
    line-height: 30px;
    margin-left: 20px;
    text-align: center;
    margin-top: 10px;
}

.hotbox {
    padding-left: 15px;
    padding-top: 15px;
    height: 120px;
}

.city-title {
    font-size: 13px;
    color: #797d82;
}

.city-index {
    margin-top: 15px;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
}

.city-index>li {
    width: 33.3%;
    text-align: center;
    box-sizing: border-box;
    padding-bottom: 15px;
}

.city-index>li>div {
    height: 30px;
    background: #f4f4f4;
    line-height: 30px;
    border-radius: 3px;
    box-sizing: border-box;
    margin: 0 7.5px;
    font-size: 14px;
    color: #191a1b;
}

.theheader {
    background: #f4f4f4;
}
</style>
